<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  <title th:text="${name eq null ? '超视距综合用户管理信息系统' : name}"></title>
  <link rel="icon" th:href="@{'/logo.ico'}">
  <link rel="stylesheet" th:href="@{'/security/login/css/index.css'}">
  <link rel="stylesheet" th:href="@{'/security/login/js/unpkg/unpkg.com_element-ui@2.15.13_lib_theme-chalk_index.css'}">
  <style>
    html, body {
      overflow: hidden;
    }

    .background {
      width: 10rem;
      height: calc(100vh - 0.44rem);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin: 0;
      padding: 0;
      display: flex;
    }

    .el-message {
      text-align: center !important;
    }

    .el-message .el-icon-success {

      display: none;
    }

    .el-message .el-icon-error {
      display: none;
    }
  </style>
  <script type="text/javascript">
    function initREM() {
      let screenWidth = document.documentElement.clientWidth, rem = screenWidth / 10
      document.documentElement.style.fontSize = rem + 'px'
    }

    window.addEventListener('resize', initREM, false)
    initREM()
  </script>
</head>
<body>
<div id="app">
  <img th:src="@{'/security/login/img/log.png'}" class="log"/>
  <div class="background" th:style="'background-image:url('+${cover eq null ? '/security/login/img/background.png' : cover}+')'">
    <div class="b-right">
      <div class="headline">
        <div><img th:src="@{${icon eq null ? '/security/login/img/logt.png' : icon}}"/></div>
        <div th:text="${name eq null ? '超视距综合用户管理信息系统' : name}"></div>
      </div>

      <div class="login">
        <div class="login-button">
          <div class="login-t login-1 " :class="loginBox == 0?'login-blue':''" @click="loginBox=0,getVerifyt()">账号密码登录</div>
          <div class="login-t login-2" :class="loginBox == 1?'login-blue':''" @click="loginBox=1"> 手机验证码登录</div>
          <div class="login-t login-3" :class="loginBox == 2?'login-blue':''" @click="loginBox=2,getVerifyt()">注册</div>
        </div>
      </div>
      <div class="login-box">
        <form th:action="@{/security/login}" method="post" accept-charset="UTF-8" class="login-box-1" v-if='loginBox == 0'>
          <div class="input-user input">
            <img th:src="@{'/security/login/img/input-user.png'}"/><input type="text" v-model="loginUserData.username" name="username" placeholder="输入账号"/>
          </div>
          <div class="input-pwd input">
            <img th:src="@{'/security/login/img/input-pwd.png'}"/> <input type="password" v-model="loginUserData.password" name="password" placeholder="输入密码"/>
          </div>
          <!-- <div class="input-verify input"  v-show="root">
            <input type="text" v-model="loginUserData.code" placeholder="输入手机验证码" />
            <div class="input-verify-phone" @click="startCountdown3()">{{phoneText3}}</div>
          </div> -->

          <div class="input-verify">
            <div class="ix"></div>
            <input type="hidden" name="captchaId" value="login">
            <input placeholder="输入验证码" v-model="loginUserData.captcha" name="captcha" maxlength="4"/>
            <img :src='verify' class="verify-img" @click="getVerifyt"/>
          </div>
          <button type="submit" class="login-submit">登录</button>
          <!--<div class="login-submit" @click="loginUser">登录</div>-->
        </form>
        <form th:action="@{/security/smslogin}" method="post" accept-charset="UTF-8" class="login-box-1" v-else-if='loginBox == 1'>
          <div class="input-user input">
            <img class="img-phone" th:src="@{'/security/login/img/input-phone.png'}"/><input type="text" v-model="loginPhoneData.phone" name="phone" placeholder="输入手机号码" maxlength="11"/>
          </div>
          <div class="input-verify input">
            <input type="text" v-model="loginPhoneData.code" name="code" placeholder="输入手机验证码" maxlength="6"/>
            <div class="input-verify-phone" @click="startCountdown()">{{phoneText}}</div>
          </div>
          <button type="submit" class="login-submit">登录</button>
          <!--<div class="login-submit" @click="loginPhone">登录</div>-->
        </form>

        <div class="login-box-1" v-else>
          <div class="input-user input">
            <img th:src="@{'/security/login/img/input-user.png'}"/><input type="text" v-model="registerData.username" placeholder="输入账号"/>
          </div>
          <div class="input-user input">
            <img class="img-phone" th:src="@{'/security/login/img/input-phone.png'}"/><input type="text" v-model="registerData.phone" placeholder="输入手机号码" maxlength="11"/>
          </div>
          <div class="input-pwd input">
            <img th:src="@{'/security/login/img/input-pwd.png'}"/> <input type="password" v-model="registerData.password" placeholder="设置密码"/>
          </div>
          <div class="input-verify input">
            <input type="text" v-model="registerData.code" placeholder="输入手机验证码" maxlength="6"/>
            <div class="input-verify-phone" @click="startCountdown2()">{{phoneText2}}</div>
          </div>
          <div class="input-verify">
            <div class="ix"></div>
            <input placeholder="输入验证码" v-model="registerData.captcha"/>

            <img :src='verify' class="verify-img" @click="getVerifyt"/>

          </div>
          <div class="login-submit" @click="register">提交注册申请</div>
        </div>


      </div>

      <div class="login-box">

      </div>
    </div>

  </div>
</div>
<script th:src="@{'/security/login/js/jquery/jquery.1.9.0.js'}"></script>
<script th:src="@{'/security/login/js/unpkg/unpkg.com_vue@2.7.14_dist_vue.js'}"></script>
<script th:src="@{'/security/login/js/unpkg/unpkg.com_element-ui@2.15.13_lib_index.js'}"></script>
<!-- import Vue before Element -->
<script th:src="@{'/security/login/js/vue.js'}"></script>
<!-- import JavaScript -->
<script th:src="@{'/security/login/js/element-ui.js'}"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        url: "",
        verify: '',
        verifyId: '',
        phoneText: '发送验证码',
        phoneText2: '发送验证码',
        phoneText3: '发送验证码',
        countdown: 0,
        countdown2: 0,
        countdown3: 0,
        root: false,
        // buttonText
        loginBox: 0,
        loginUserData: { //账号登录
          username: '',
          password: '',
          captcha: '',
        },
        loginPhoneData: { //手机登录
          phone: '',
          code: '',
        },
        registerData: { //注册
          username: '',
          password: '',
          phone: '',
          captcha: '',
          code: '',
        },
        img: {}
      }
    },
    mounted() {
      this.getVerifyt(); // 调用该方法来初始化图片
      const params = decodeURIComponent(location.search.substring(1)).split("&"), query = {}
      params.forEach(item => {
        let kv = item.split("=")
        query[kv[0]] = kv[1]
      })
      if (query.error) this.$message.error(query.error)
    },
    methods: {
      getVerifyt(id) {
        this.verifyId = 'login';
        const width = Math.trunc(0.9 * 192);
        const height = Math.trunc(0.25 * 192);
        const url = this.url + '/security/captcha?id=' + this.verifyId + '&b=' + new Date().getTime() + '&size=' + width + '_' + height;
        this.verify = url;
      },
      loginUser() {

        let data = {
          username: this.loginUserData.username,
          password: this.loginUserData.password,
          captcha: this.loginUserData.captcha,
          captchaId: "login",
        }

        $.ajax({
          type: "POST", // 设置请求方法为 POST
          url: this.url + '/security/login',
          context: document.body,
          data: data,
          success: (res) => {
            if (res.code != 200) {
              this.$message.error(res.msg)
            } else {
              this.$message.success('登录成功' + res.data.username)
            }
            console.log(res)
          },
          error: (xhr, status, error) => {
            this.$message.error('请求失败')
          }
        });
      },
      loginPhone() {
        $.ajax({
          type: "POST", // 设置请求方法为 POST
          url: this.url + '/security/smslogin',
          context: document.body,
          data: {
            phone: this.loginPhoneData.phone,
            code: this.loginPhoneData.code,
          },
          success: (res) => {
            console.log(res)
            if (res.code != 200) {
              this.$message.error(res.msg);
            }
          }
        });
      },
      register() {
        $.ajax({
          type: "POST", // 设置请求方法为 POST
          url: this.url + '/system/user/register',
          context: document.body,
          data: {
            username: this.registerData.username,
            password: this.registerData.password,
            phone: this.registerData.phone,
            code: this.registerData.code,
            captcha: this.registerData.captcha,
            captchaId: "register",
          },
          success: (res) => {
            console.log(res)
            if (res.code != 200) {
              this.$message.error(res.msg);
            }
          },
          error: (xhr, status, error) => {
            this.$message.error("POST请求失败" + status + error)
          }
        });
      },
      getNote(phone) {
        $.ajax({
          type: "POST", // 设置请求方法为 POST
          url: this.url + '/toolkit/sms/code',
          context: document.body,
          data: {
            phone: phone,
          },
          success: (res) => {
            console.log(res)
            if (res.code != 200) {
              this.$message.error(res.msg);
            } else {
              this.$message.success('验证码已发送')
            }
          },
          error: (xhr, status, error) => {

            this.$message.error('请求失败')

          }
        });
      },
      startCountdown() {
        if (this.countdown > 0) {
          return; // 如果正在倒计时中，不允许再次点击
        } else {
          this.getNote(this.loginPhoneData.phone);
        }

        this.countdown = 60; // 设置倒计时初始值
        this.phoneText = this.countdown + 's重新发送';

        // 启动定时器，每秒更新倒计时时间
        const timer = setInterval(() => {
          this.countdown--; // 倒计时减1
          this.phoneText = this.countdown + 's重新发送';

          // 当倒计时结束时
          if (this.countdown <= 0) {
            clearInterval(timer); // 清除定时器
            this.phoneText = '获取验证码'; // 恢复按钮文本
          }
        }, 1000); // 定时器间隔为1秒
      },

      startCountdown2() {
        if (this.countdown2 > 0) {
          return; // 如果正在倒计时中，不允许再次点击
        } else {
          this.getNote(this.registerData.phone);
        }

        this.countdown2 = 60; // 设置倒计时初始值
        this.phoneText2 = this.countdown2 + 's重新发送';

        // 启动定时器，每秒更新倒计时时间
        const timer = setInterval(() => {
          this.countdown2--; // 倒计时减1
          this.phoneText2 = this.countdown2 + 's重新发送';

          // 当倒计时结束时
          if (this.countdown2 <= 0) {
            clearInterval(timer); // 清除定时器
            this.phoneText2 = '获取验证码'; // 恢复按钮文本
          }
        }, 1000); // 定时器间隔为1秒
      },

    }
  })
</script>
</body>
</html>